<template>
  <div class="home">
    <div class="home-carousel">
      <el-carousel :interval="4000" arrow="always" height="420px">
        <el-carousel-item v-for="image in images" :key="image">
          <img :src="image" alt="" style="width: 100%; height: 420px;">
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="content">
      <div class="mainBox-img">
        <ul class="mainBox-imgNav" id="index-main-ul">
          <li is="router-link" to="/list?word=%E7%8B%97" tag="li">
            <a><img src="@/image/03.png" alt=""><span>汪星必备</span></a>
            <ul class="imgNav-ul">
              <li is="router-link" to="/list" tag="li">
                <img src="@/image/04.png" alt="">
                <span>狗狗主粮</span>
              </li>
              <li is="router-link" to="/list" tag="li">
                <img src="@/image/07.png" alt="">
                <span>狗狗零食</span>
              </li>
              <li is="router-link" to="/list" tag="li">
                <img src="@/image/12.png" alt="">
                <span>狗狗玩具</span>
              </li>
              <li is="router-link" to="/list" tag="li">
                <img src="@/image/13.png" alt="">
                <span>清洁用品</span>
              </li>
              <li is="router-link" to="/list" tag="li">
                <img src="@/image/05.png" alt="">
                <span>生活用品</span>
              </li>
            </ul>
          </li>

          <li is="router-link" to="/list?word=%E7%8C%AB" tag="li">
            <a><img src="@/image/08.png" alt=""><span>喵主御用</span></a>
            <ul class="imgNav-ul">
              <li is="router-link" to="/list" tag="li">
                <img src="@/image/06.png" alt="">
                <span>猫咪主粮</span>
              </li>
              <li is="router-link" to="/list" tag="li">
                <img src="@/image/01.png" alt="">
                <span>猫咪零食</span>
              </li>
              <li is="router-link" to="/list" tag="li">
                <img src="@/image/11.png" alt="">
                <span>猫咪玩具</span>
              </li>
              <li is="router-link" to="/list" tag="li">
                <img src="@/image/14.png" alt="">
                <span>猫猫清洁</span>
              </li>
              <li is="router-link" to="/list" tag="li">
                <img src="@/image/10.png" alt="">
                <span>猫猫用品</span>
              </li>
            </ul>
          </li>

          <li is="router-link" to="/list?word=%E5%91%A8%E8%BE%B9" tag="li">
            <a><img src="@/image/02.png" alt=""><span>好物周边</span></a>
            <ul class="imgNav-ul">
              <li is="router-link" to="/list" tag="li">
                <img src="@/image/15.png" alt="">
                <span>潮玩手办</span>
              </li>
              <li is="router-link" to="/list" tag="li">
                <img src="@/image/16.png" alt="">
                <span>服饰箱包</span>
              </li>
              <li is="router-link" to="/list" tag="li">
                <img src="@/image/10.png" alt="">
                <span>文具用品</span>
              </li>
              <li is="router-link" to="/list" tag="li">
                <img src="@/image/02.png" alt="">
                <span>生活家居</span>
              </li>
              <li is="router-link" to="/list" tag="li">
                <img src="@/image/10.png" alt="">
                <span>数码产品</span>
              </li>
            </ul>
          </li>

          <li is="router-link" to="/list?word=%E6%B0%B4%E6%97%8F" tag="li">
            <a><img src="@/image/14.png" alt=""><span>水族</span></a>
            <ul class="imgNav-ul">
              <li is="router-link" to="/list" tag="li">
                <img src="@/image/01.png" alt="">
                <span>饲料</span>
              </li>
              <li is="router-link" to="/list" tag="li">
                <img src="@/image/16.png" alt="">
                <span>水族箱</span>
              </li>
              <li is="router-link" to="/list" tag="li">
                <img src="@/image/05.png" alt="">
                <span>水槽沙</span>
              </li>
              <li is="router-link" to="/list" tag="li">
                <img src="@/image/17.png" alt="">
                <span>医疗用品</span>
              </li>
              <li is="router-link" to="/list" tag="li">
                <img src="@/image/15.png" alt="">
                <span>水族箱造景</span>
              </li>
            </ul>
          </li>

          <li is="router-link" to="/list?word=%E5%B0%8F%E5%AE%A0%E7%89%A9" tag="li">
            <a><img src="@/image/01.png" alt=""><span>小宠</span></a>
            <ul class="imgNav-ul">
              <li is="router-link" to="/list" tag="li">
                <img src="@/image/06.png" alt="">
                <span>小宠饲料</span>
              </li>
              <li is="router-link" to="/list" tag="li">
                <img src="@/image/11.png" alt="">
                <span>小宠玩具</span>
              </li>
              <li is="router-link" to="/list" tag="li">
                <img src="@/image/15.png" alt="">
                <span>洗护美容</span>
              </li>
              <li is="router-link" to="/list" tag="li">
                <img src="@/image/19.png" alt="">
                <span>小宠医护</span>
              </li>
            </ul>
          </li>

            <li is="router-link" to="/list?word=%E7%88%AC%E8%99%AB%E5%AE%A0%E7%89%A9" tag="li">
              <a><img src="@/image/09.png" alt=""><span>爬虫</span></a>
              <ul class="imgNav-ul">
                <li is="router-link" to="/list" tag="li">
                  <img src="@/image/04.png" alt="">
                  <span>爬虫饲料</span>
                </li>
                <li is="router-link" to="/list" tag="li">
                  <img src="@/image/18.png" alt="">
                  <span>爬虫玩具</span>
                </li>
                <li is="router-link" to="/list" tag="li">
                  <img src="@/image/13.png" alt="">
                  <span>爬虫洗护</span>
                </li>
                <li is="router-link" to="/list" tag="li">
                  <img src="@/image/16.png" alt="">
                  <span>饲料箱及配件</span>
                </li>
              </ul>
            </li>

          <li is="router-link" to="/list?word=%E9%B8%9F" tag="li">
            <a><img src="@/image/12.png" alt=""><span>鸟类</span></a>
            <ul class="imgNav-ul">
              <li is="router-link" to="/list" tag="li">
                <img src="@/image/05.png" alt="">
                <span>鸟类饲料</span>
              </li>
              <li is="router-link" to="/list" tag="li">
                <img src="@/image/12.png" alt="">
                <span>鸟类玩具</span>
              </li>
              <li is="router-link" to="/list" tag="li">
                <img src="@/image/19.png" alt="">
                <span>鸟类医疗</span>
              </li>
              <li is="router-link" to="/list" tag="li">
                <img src="@/image/16.png" alt="">
                <span>笼/舍/巢及配件</span>
              </li>
            </ul>
          </li>

        </ul>
      </div>

      <div class="main-Child">
        <div class="child-head">
          <div style="cursor: pointer;" class="title">汪星必备</div>
        </div>
        <ul class="main-Child-ul" id="indexDog-ul">
          <li class="firstLi" is="router-link" to="/list?word=%E7%8B%97" tag="li" style="background: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604484214573&di=3201f7d91c6ed60ff3e1d74e9ff912e6&imgtype=0&src=http%3A%2F%2Fimg17.3lian.com%2Fd%2Ffile%2F201703%2F10%2Fb2a00118157f1d12e80c902b91cb49a1.jpg') 0 0 no-repeat;background-size: 100% 100%;"></li>
          <li class="main-Child-li" v-for="dog in dogData" :key="dog.id" is="router-link" :to="'/content?id='+dog.id" tag="li">
            <div class="main-list-img">
              <img :src="dog.image" />
            </div>
            <div class="main-list-text">{{dog.title}}</div>
            <span class="priceNow">￥{{dog.price}}</span>
          </li>
        </ul>
      </div>

      <div class="main-Child">
        <div class="child-head">
          <div style="cursor: pointer;" class="title">喵主御用</div>
        </div>
        <ul class="main-Child-ul" id="indexDog-ul">
          <li class="firstLi" is="router-link" to="/list?word=%E7%8C%AB" tag="li" style="background: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604488211106&di=310c57231ecea9d7dbef71c7b5897217&imgtype=0&src=http%3A%2F%2Fpic22.nipic.com%2F20120718%2F4499633_230508497000_2.jpg') 0 0 no-repeat;background-size: 100% 100%;"></li>
          <li class="main-Child-li" v-for="cat in catData" :key="cat.id" is="router-link" :to="'/content?id='+cat.id" tag="li">
            <div class="main-list-img">
              <img :src="cat.image" />
            </div>
            <div class="main-list-text">{{cat.title}}</div>
            <span class="priceNow">￥{{cat.price}}</span>
          </li>
        </ul>
      </div>

      <div class="main-Child">
        <div class="child-head">
          <div style="cursor: pointer;" class="title">好物周边</div>
        </div>
        <ul class="main-Child-ul" id="indexDog-ul">
          <li class="firstLi" is="router-link" to="/list?word=%E5%91%A8%E8%BE%B9" tag="li" style="background: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604488827435&di=fb924d9f74d7113731dba0a5225adc61&imgtype=0&src=http%3A%2F%2Fimage.17173.com%2Fbbs%2Fv1%2F2011%2F06%2F26%2F1309081825474.jpg') 0 0 no-repeat;background-size: 100% 100%;"></li>
          <li class="main-Child-li" v-for="goods in goodsData" :key="goods.id" is="router-link" :to="'/content?id='+goods.id" tag="li">
            <div class="main-list-img">
              <img :src="goods.image" />
            </div>
            <div class="main-list-text">{{goods.title}}</div>
            <span class="priceNow">￥{{goods.price}}</span>
          </li>
        </ul>
      </div>

      <div class="main-Child">
        <div class="child-head">
          <div style="cursor: pointer;" class="title">水族</div>
        </div>
        <ul class="main-Child-ul" id="indexDog-ul">
          <li class="firstLi" is="router-link" to="/list?word=%E6%B0%B4%E6%97%8F" tag="li" style="background: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604489464608&di=f4988abe062bb98bd8cf0d019367459c&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20181227%2F05a02c209f334d14889522f4dd9bc90e.jpeg') 0 0 no-repeat;background-size: 100% 100%;"></li>
          <li class="main-Child-li" v-for="water in waterData" :key="water.id" is="router-link" :to="'/content?id='+water.id" tag="li">
            <div class="main-list-img">
              <img :src="water.image" />
            </div>
            <div class="main-list-text">{{water.title}}</div>
            <span class="priceNow">￥{{water.price}}</span>
          </li>
        </ul>
      </div>

      <div class="main-Child">
        <div class="child-head">
          <div style="cursor: pointer;" class="title">小宠</div>
        </div>
        <ul class="main-Child-ul" id="indexDog-ul">
          <li class="firstLi" is="router-link" to="/list?word=%E5%B0%8F%E5%AE%A0%E7%89%A9" tag="li" style="background: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604489903035&di=b915eccac1f0ff0e97da5817628cc462&imgtype=0&src=http%3A%2F%2Fimg1s.tuliu.com%2Fart%2F2017%2F12%2F11%2F5a2e37c343fbd.png') 0 0 no-repeat;background-size: 100% 100%;"></li>
          <li class="main-Child-li" v-for="pets in petsData" :key="pets.id" is="router-link" :to="'/content?id='+pets.id" tag="li">
            <div class="main-list-img">
              <img :src="pets.image" />
            </div>
            <div class="main-list-text">{{pets.title}}</div>
            <span class="priceNow">￥{{pets.price}}</span>
          </li>
        </ul>
      </div>

      <div class="main-Child">
        <div class="child-head">
          <div style="cursor: pointer;" class="title">爬虫</div>
        </div>
        <ul class="main-Child-ul" id="indexDog-ul">
          <li class="firstLi" is="router-link" to="/list?word=%E7%88%AC%E8%99%AB%E5%AE%A0%E7%89%A9" tag="li" style="background: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604490023701&di=a6a480c2dff024c164502eca9b7b9005&imgtype=0&src=http%3A%2F%2Fup.zhuoku.org%2Fpic_360%2F0e%2F09%2Ff6%2F0e09f64aae49c9cbe8f6a7682289cd83.jpg') 0 0 no-repeat;background-size: 100% 100%;"></li>
          <li class="main-Child-li" v-for="reptiles in reptilesData" :key="reptiles.id" is="router-link" :to="'/content?id='+reptiles.id" tag="li">
            <div class="main-list-img">
              <img :src="reptiles.image" />
            </div>
            <div class="main-list-text">{{reptiles.title}}</div>
            <span class="priceNow">￥{{reptiles.price}}</span>
          </li>
        </ul>
      </div>

      <div class="main-Child">
        <div class="child-head">
          <div style="cursor: pointer;" class="title">鸟类</div>
        </div>
        <ul class="main-Child-ul" id="indexDog-ul">
          <li class="firstLi" is="router-link" to="/list?word=%E9%B8%9F" tag="li" style="background: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604490053127&di=7f86a8eb64244d674655547bf142c1f6&imgtype=0&src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fitbbs%2F1907%2F03%2Fc11%2F157111512_1562134903347_mthumb.jpg') 0 0 no-repeat;background-size: 100% 100%;"></li>
          <li class="main-Child-li" v-for="bird in birdData" :key="bird.id" is="router-link" :to="'/content?id='+bird.id" tag="li">
            <div class="main-list-img">
              <img :src="bird.image" />
            </div>
            <div class="main-list-text">{{bird.title}}</div>
            <span class="priceNow">￥{{bird.price}}</span>
          </li>
        </ul>
      </div>
    </div>

  </div>
</template>

<script>
import { getDog, getCat, getGoods, getWater, getPets, getReptiles, getBird } from '@/api/home'

export default {
  name: 'home',
  data () {
    return {
      images: [
        require('@/image/mainImg-01.jpeg'),
        require('@/image/mainImg-02.jpeg'),
        require('@/image/mainImg-03.jpeg'),
        require('@/image/mainImg-04.jpeg'),
        require('@/image/mainImg-05.jpeg'),
        require('@/image/mainImg-06.jpeg')
      ],
      dogData: '',
      catData: '',
      goodsData: '',
      waterData: '',
      petsData: '',
      reptilesData: '',
      birdData: ''
    }
  },
  created () {
    getDog().then(res => {
      const dog = res.data.data.list
      this.dogData = dog.slice(0, 8)
    })
    getCat().then(res => {
      const cat = res.data.data.list
      this.catData = cat.slice(0, 8)
    })
    getGoods().then(res => {
      const goods = res.data.data.list
      this.goodsData = goods.slice(0, 8)
    })
    getWater().then(res => {
      const water = res.data.data.list
      this.waterData = water.slice(0, 8)
    })
    getPets().then(res => {
      const pets = res.data.data.list
      this.petsData = pets.slice(0, 8)
    })
    getReptiles().then(res => {
      const reptiles = res.data.data.list
      this.reptilesData = reptiles.slice(0, 8)
    })
    getBird().then(res => {
      const bird = res.data.data.list
      this.birdData = bird.slice(0, 8)
    })
    fetch('http://www.xiongmaoyouxuan.com/api/tab/2?start=0').then(res => {
      console.log('fetch....', res)
      return res.json()
    }).then(data => {
      console.log('data.....', data)
    })
  }
}
</script>

<style lang="scss" scoped>
  .home-carousel{
    width: 100%;
    height: 420px;
    position: absolute;
  }
  .content{
    width: 1170px;
    margin: auto;
    position: relative;
  }
  .mainBox-img{
    height: 420px;
    text-align: center;
    >.mainBox-imgNav{
      z-index: 10;
      width: 200px;
      background: rgba(255,255,255,0.6);
      position: absolute;
      >li{
        height: 60px;
        background: rgb(245, 245, 245);
        opacity: 0.98;
        transition: all 0.3s;
        cursor: pointer;
        &:hover{
          background: #FEFEFE;
        }
        &:hover .imgNav-ul{
          display: block;
        }
        >a>img{
          width: 25px;
          height: 25px;
          margin: 20px 0 0 20px;
          float: left;
        }
        >a>span{
          display: inline-block;
          width: 140px;
          height: 100%;
          line-height: 60px;
          font-size: 16px;
          color: #333333;
        }
        >.imgNav-ul{
          position: absolute;
          display: none;
          width: 240px;
          height: 400px;
          top: 0;
          left: 200px;
          background: #fff;
          opacity: .6;
          padding-top: 20px;
          transition: all 0.5s;
          >li:hover{
            opacity: .5;
          }
          >li{
            width: 100%;
            height: 40px;
            margin-bottom: 20px;
            transition: all 0.3s;
            >img{
              display: inline-block;
              width: 40px;
              height: 40px;
              margin-left: 25px;
            }
            >span{
              margin-right: 15px;
              width: 160px;
              height: 100%;
              float: right;
              line-height: 40px;
              font-size: 14px;
            }
          }
        }
      }
    }
  }

  .main-Child{
    width: 100%;
    height: 624px;
    margin-bottom: 10px;
    >.child-head{
      width: 100%;
      height: 31px;
      margin-top: 56px;
      margin-bottom: 20px;
      >.title{
        font-size: 24px;
        font-weight: 600;
        float: left;
      }
      >.title-nav{
        height: 31px;
        float: right;
        >.more-btn{
          height: 31px;
          line-height: 31px;
          float: right;
          >a{
            font-size: 14px;
            color: #666;
          }
        }
      }
    }
  }
  .main-Child-ul{
    width: 1170px;
    height: 572px;
    border-top: 1px solid #E5E5E5;
    border-right: 1px solid #E5E5E5;
    >.firstLi{
      width: 467px;
      height: 286px;
      float: left;
      cursor: pointer;
      border-left: 1px solid #E5E5E5;
      border-bottom: 1px solid #E5E5E5;
    }
    >.main-Child-li{
      width: 213px;
      height: 246px;
      padding: 20px 10px 20px 10px;
      text-align: center;
      border-left: 1px solid #E5E5E5;
      border-bottom: 1px solid #E5E5E5;
      position: relative;
      cursor: pointer;
      float: left;
      >.main-list-img>img{
        width: 180px;
        height: 188px;
        border-radius: 8px;
      }
      >.main-list-img:hover img{
        transform: scale(1.1);
      }
      &:hover .main-list-text{
        color: #74A1D0;
      }
      >.main-list-img>img{
        transition: all 1s;
      }
      >.main-list-text{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #333333;
        font-size: 14px;
        margin-top: 25px;
        transition: all 0.5s;
        margin-bottom: 10px;
      }
      >span{
        color: red;
      }
    }
  }
</style>
